<template>
    <div class="main">
        <el-button type="primary" @click="checkData">查看数据</el-button>
        <el-button type="primary" @click="submitData">模拟提交</el-button>
        <!-- 展示区域 -->
        <div class="container">
            <!-- 滚动条区域 -->
            <div class="container-canvas">
                <!-- 展示区域 -->
                <div ref="contentRef" :style="containerStyle" class="container-canvas__content">
                    <div ref="activeItemRef" class="container-canvas__content__item" :style="item.style"  v-for="item in renderList" :key="item.key" >
                        <component v-if="item.field" v-model="item.value" :is="item.component"></component>
                        <component v-else :is="item.component"></component>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { container,toollist } from '@/data/editor'
import { submit } from '@gradio/client';
import { ref , toRaw, onMounted } from 'vue';

let containerStyle = ref(container.style)

// 读取缓存数据，模拟读取数据库数据
let renderList = ref(toollist.renderList)

const checkData = () => {
    console.log(renderList.value)
}
const submitData = () => {
    // 将数据解析为[{k:v},{k:v}...]格式
    let data = []
    renderList.value.forEach(item => {
        if(item.field){
            data.push({
                key: item.field,
                value: item.value
            })
        }
    })
    console.log(data)
}
</script>

<style scoped lang="scss">
.main{
    border:1px solid #ccc;
    box-shadow: 0 0 10px #ccc;
    width: 100%;
    display: flex;
    height: 94%;
    box-sizing: border-box;
    position: relative;
    .preview{
        box-sizing: border-box;
        position:absolute;
        left:0px;
        width:250px;
        background-color: yellow;
        height:100%;
        padding-top:20px;
        &-item{
            margin-top:10px;
            position: relative;
            box-sizing: border-box;
            padding:10px;
            user-select: none;
            cursor: move;
            &::after{
                content:'';
                left:0;
                bottom:0;
                top:0;
                right:0;
                width: 100%;
                height:100%;
                position: absolute;
                background-color: #ccc;
                opacity: 0.5;
                z-index: 99;
            }
        }
    }
    .container{
        box-sizing: border-box;
        border:#ccc 1px solid;
        margin:0 10px;
        position:absolute;
        height:100%;
        left:250px;
        right:250px;
        top:0px;
        &-canvas{
            position:absolute;
            bottom: 0px;
            height:90%;
            width:100%;
            overflow: auto;
            &__content{
                position:absolute;
                top:0px;
                left:0px;
                height:550px;
                width:700px;
                background-color: #ccc;
            }
            &__content__item{
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .focus{
                border:1px solid red;
                user-select: none;
                cursor: move;
            }
            .focus::after{
                content:'';
                left:0;
                bottom:0;
                top:0;
                right:0;
                width: 100%;
                height:100%;
                position: absolute;
                background-color: #ccc;
                opacity: 0.5;
                z-index: 99;
            }
        }
    }
    .data{
        box-sizing: border-box;
        position:absolute;
        right:0px;
        width:250px;
        height:100%;
        padding-top:20px;
    }
}
</style>